<template>
  <div class="mine">
    <div class="mine-top">
      <img v-if="this.$store.state.isOnline" :src="src" @click="change" />
      <img v-else src="../assets/avtor.png" />

      <p v-if="name">{{name}}</p>
      <p v-else>
        <a href="#/login">登录/注册</a>
      </p>
      <span @click="back" class="back">返回首页</span>
    </div>
    <ul class="hide" id="show">
      <li v-for="(item,index) in userpics" :key="index">
        <img :src="item.pic" class="touxiang" @click="into(item.images)" />
      </li>
    </ul>
    <div class="mine-content">
      <ul>
        <li @click="car">
          <span>
            <i class="el-icon-tickets"></i>我的票
          </span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li @click="coupon">
          <span>
            <i class="fa fa-flag-checkered"></i>优惠券
          </span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li @click="follow">
          <span>
            <i class="fa fa-heart-o"></i>我的关注
          </span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li @click="address">
          <span>
            <i class="el-icon-location-outline"></i>收货地址
          </span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <!-- <li @click="buyer">
          <span>
            <i class="fa fa-user-circle-o"></i>常用购票人
          </span>
          <i class="el-icon-arrow-right"></i>
        </li> -->
        <li @click="real">
          <span>
            <i class="fa fa-check-square-o"></i>实名认证
          </span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li @click="advs">
          <span>
            <i class="fa fa-pencil-square-o"></i>意见反馈
          </span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <span>
            <i class="fa fa-volume-control-phone"></i>客服电话
          </span>
          <i>114</i>
        </li>
        <li v-show="name">
          <span @click="exit" class="exit">退出登录</span>
        </li>
      </ul>
    </div>
    <div class="mine-btm">
      <p>关于Super麦｜联系我们</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 用户名
      name: "",
      //用户头像
      src: "",
      // 切换头像
      userpics: "",
    };
  },
  mounted() {
    //获取用户信息
    if (this.$store.state.name) {
      this.name = this.$store.state.name;
      this.axios.get("/user?username=" + this.$store.state.name).then((res) => {
        let img = res.data.result[0].pic;
        this.src = require("../assets" + img);
      });
    }
    //获取头像库
    this.axios.get("/userpic").then((res) => {
      this.userpics = res.data.result;
      this.userpics.forEach((ele) => {
        ele.pic = require("../assets" + ele.images);
      });
    });
  },
  methods: {
    coupon(){
      location.href="#/coupon"
    },
    exit() {
      history.go(0);
    },
    back() {
      location.href = "#/";
    },
    // 修改头像选择是否可视
    change() {
      let picEle = document.getElementById("show");
      if (picEle.className == "hide") {
        picEle.className = "pics";
      } else {
        picEle.className = "hide";
      }
    },
    follow() {
      this.$store.commit('headchange','我的关注')
      location.href = "#/follow";
    },
    car() {
      this.$store.commit('headchange','我的票')
      location.href = "#/car";
    },
    address(){
      this.$store.commit('headchange','收货地址')
      location.href="#/address"
    },
    buyer(){
       this.$store.commit('headchange','常用购票人')
      location.href="#/buyer"
    },
    real(){
       this.$store.commit('headchange','实名认证')
      location.href="#/real"
    },
    advs(){
       this.$store.commit('headchange','意见反馈')
      location.href="#/advs"
    },
    // 修改头像
    into(pic) {
      this.axios
        .post(
          "/updatepic",
          "username=" + this.$store.state.name + "&pic=" + pic
        )
        .then((res) => {
          this.src = require("../assets" + pic);
          let picEle = document.getElementById("show");
          picEle.className = "hide";
        });
    },
  },
};
</script>


<style scoped>
.mine {
  background-color: #f2f3f4;
  height:calc(100vh - 80px)
}
.mine .mine-top {
  background-color: #ff1268;
  width: 100%;
  display: flex;
  top: 0;
  position: fixed;
}
.mine .mine-top img {
  border-radius: 50%;
  height: 80px;
  margin: 0 20px;
}
/* 选择头像 */
.mine .pics {
  list-style: none;
  clear: both;
  position: fixed;
  left: 10vw;
  display: flex;
  width: 240px;
  flex-wrap: wrap;
  /* display: none; */
}
.mine .hide {
  display: none;
  position:fixed;
  top: 80px;
}
.mine .pics .touxiang {
  width: 60px;
}
/* 返回首页样式 */
.mine .mine-top .back {
  position: absolute;
  top: 23px;
  right: 10px;
  font-size: 16px;
  background-color: white;
  padding: 5px;
  color: #ff1268;
  border-radius: 10px;
}
.mine .mine-top p {
  margin: 25px 0;
  font-size: 20px;
}
.mine .mine-top p {
  color: #fff;
}
.mine .mine-top p a {
  color: #fff;
}
.mine .mine-content {
  margin-top: 80px;
}
.mine .mine-content ul {
  list-style: none;
  margin-top: 20px;
}
.mine .mine-content ul li {
  width: 100%;
  background-color: #fff;
  text-align: left;
  overflow: hidden;
  border-bottom: solid 1px #f2f3f4;
  padding: 20px 0 20px 20px;
  font-size: 18px;
  color: #9a9a9a;
}
.mine .mine-content ul li:nth-child(4) {
  margin: 20px 0;
}
.mine .mine-content ul li span {
  float: left;
}
.mine .mine-content ul li span i {
  color: #ff1268;
  margin-right: 10px;
  font-size: 20px;
}

.mine .mine-content ul li > i {
  float: right;
  margin-right: 10px;
  font-style: normal;
  font-size: 16px;
}
/* 退出登录 */
.mine .mine-content ul .exit {
  margin-left: calc(50vw - 56px);
}
/* 底部导航 */
.mine .mine-btm {
  background-color:#F2F3F4 ;
  padding: 30px 0;
  color: #999;
}
</style>
